/*
 * @Description: 层级组件 - 表格组件
 * @Author: Rfan
 * @Date: 2022-06-21 10:25:48
 * @LastEditTime: 2023-01-05 19:11:29
 */

import { ReactNode, useEffect } from 'react';
import { Space, Table } from 'antd';
import { debounce } from 'lodash-es';
import { selectItemByKey } from '@/utils/list';
import { useFormatMessage } from '@/utils/intlHelpers';
import type { ColumnsType } from 'antd/es/table';
import { TablePaginationConfig } from 'antd/lib/table/interface';

export interface ICommonTableListProps {
  list: any[];
  fieldList: any[];
  actions?: (record: any) => ReactNode;
  pagination?: false | TablePaginationConfig;
  loading?: boolean;
  selectItems: number[];
  setSelectedItem: any;
  selectChange?: any;
}

const CommonTableList = (props: ICommonTableListProps) => {
  const {
    list,
    fieldList,
    actions,
    pagination,
    loading,
    selectItems,
    setSelectedItem,
    selectChange
  } = props;
  const formatMessage = useFormatMessage();

  /**
   * @description: 案卷表格选中相关
   * @param {number} selectedRowKeys
   */
  const onSelectChange = (selectedRowKeys: number[]) => {
    setSelectedItem(selectedRowKeys);
  };

  /**
   * @description:  表格多选配置
   */
  const rowSelection = {
    selectedRowKeys: selectItems,
    onChange: onSelectChange
  };

  /**
   * @description: 列表选中条目方法
   * @param {any} record 选中的条目
   */
  const selectRow = (record: any) => {
    selectChange && selectChange(record);
  };

  useEffect(() => {
    selectChange && selectChange(list[0]);
  }, [list]);
  const actionCol: ColumnsType = [
    {
      title: formatMessage('tableAction'),
      key: 'action',
      fixed: 'right',
      render: (_text, record: any) => {
        return <Space>{actions(record)}</Space>;
      }
    }
  ];

  const genColumns = (): ColumnsType => {
    const columns: ColumnsType = fieldList.map((field) => {
      const { field_desc: title, field_name: key } = field;
      return {
        title,
        dataIndex: key,
        key,
        render: (val: any) => {
          const fieldItem: any = selectItemByKey(key, fieldList, 'field_name');
          if (fieldItem?.dict_type_id) {
            return val?.name;
          }
          return val;
        }
      };
    });
    return list.length > 0 && actions ? [...columns, ...actionCol] : columns;
  };

  return (
    <Table
      columns={genColumns()}
      dataSource={list}
      loading={loading}
      rowKey="id"
      rowSelection={rowSelection}
      scroll={{ x: 'max-content' }}
      size="small"
      pagination={pagination}
      bordered
      onRow={(record) => ({
        onClick: debounce(() => {
          selectRow(record);
        }, 200)
      })}
    />
  );
};

export default CommonTableList;

// {
//   current: listQuery.pageNo,
//     pageSize: listQuery.pageSize,
//   total,
//   showTotal: (total) => `共 ${total} 条`,
//   onChange: pageChange
// }
//
// // 切换页码触发
// const pageChange = (page: number, pageSize: number) => {
//   setListQuery((state: IPageQuery) => ({
//     ...state,
//     pageNo: page,
//     pageSize
//   }));
// };
